<template>
  <dv-card class="mainPadding">
    <template #header>
      <today style="align-items: center" />
    </template>
    <div :class="$style.contentBox">
      <border-box>
        <dv-card
          :headerBg="require('@/assets/15bj/一体化智能化公共数据平台bj.png')"
          :style="{ gap: '10px' }"
        >
          <template #header>
            <dv-title1>五大领域综合应用</dv-title1>
          </template>
          <div :class="$style.rightContent">
            <dv-card
              header-height="40px"
              :card-bg="require('@/assets/15bj/党政机关整体智治bjx4.png')"
            >
              <template #header>
                <dv-title2>党政机关整体智治</dv-title2>
              </template>
              <div>
                <!--            todo -->
                <Image
                  :src="require('@/assets/components/152/a9.png')"
                  width="410"
                ></Image>
                <div class="flex">
                  <Pie
                    eleId="pie3"
                    :width="210"
                    :height="110"
                    :source="pie3"
                    :radius="['40%', '70%']"
                    roseType=""
                  ></Pie>
                  <bar-stack
                    eleId="bar4"
                    :width="210"
                    :height="110"
                    :source="bar4"
                    barWidth="15"
                    :stack="false"
                    :barBorderRadius="[15, 15, 15, 15]"
                    :color="[bar4Color]"
                  ></bar-stack>
                </div>
              </div>
            </dv-card>
            <dv-card
              header-height="40px"
              :card-bg="require('@/assets/15bj/党政机关整体智治bjx4.png')"
            >
              <template #header>
                <dv-title2>数字政府</dv-title2>
              </template>
              <div>
                <!--            todo -->
                <Image
                  :src="require('@/assets/components/152/a11.png')"
                  width="410"
                ></Image>
                <div class="flex">
                  <Pie
                    eleId="pie11"
                    :width="210"
                    :height="110"
                    :source="pie3"
                    :radius="['40%', '70%']"
                    roseType=""
                  ></Pie>
                  <bar-stack
                    eleId="bar11"
                    :width="210"
                    :height="110"
                    :source="bar4"
                    barWidth="15"
                    :stack="false"
                    :barBorderRadius="[15, 15, 15, 15]"
                    :color="[bar4Color]"
                  ></bar-stack>
                </div>
              </div>
            </dv-card>
            <!--            <dv-card-->
            <!--              header-height="40px"-->
            <!--              :card-bg="require('@/assets/15bj/党政机关整体智治bjx4.png')"-->
            <!--            >-->
            <!--              <template #header>-->
            <!--                <dv-title2>数字法治</dv-title2>-->
            <!--              </template>-->
            <!--              <div>-->
            <!--                &lt;!&ndash;            todo &ndash;&gt;-->
            <!--                <Image-->
            <!--                  :src="require('@/assets/components/152/a14.png')"-->
            <!--                  width="410"-->
            <!--                ></Image>-->
            <!--                <div class="flex">-->
            <!--                  <Pie-->
            <!--                    eleId="pie12"-->
            <!--                    :width="210"-->
            <!--                    :height="110"-->
            <!--                    :source="pie3"-->
            <!--                    :radius="['40%', '70%']"-->
            <!--                    roseType=""-->
            <!--                  ></Pie>-->
            <!--                  <bar-stack-->
            <!--                    eleId="bar12"-->
            <!--                    :width="210"-->
            <!--                    :height="110"-->
            <!--                    :source="bar4"-->
            <!--                    barWidth="15"-->
            <!--                    :stack="false"-->
            <!--                    :barBorderRadius="[15, 15, 15, 15]"-->
            <!--                    :color="[bar4Color]"-->
            <!--                  ></bar-stack>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </dv-card>-->
            <dv-card
              header-height="40px"
              :card-bg="require('@/assets/15bj/党政机关整体智治bjx4.png')"
            >
              <template #header>
                <dv-title2>数字经济</dv-title2>
              </template>
              <div>
                <!--            todo -->
                <Image
                  :src="require('@/assets/components/152/a10.png')"
                  width="410"
                ></Image>
                <div class="flex">
                  <Pie
                    eleId="pie13"
                    :width="210"
                    :height="110"
                    :source="pie3"
                    :radius="['40%', '70%']"
                    roseType=""
                  ></Pie>
                  <bar-stack
                    eleId="bar13"
                    :width="210"
                    :height="110"
                    :source="bar4"
                    barWidth="15"
                    :stack="false"
                    :barBorderRadius="[15, 15, 15, 15]"
                    :color="[bar4Color]"
                  ></bar-stack>
                </div>
              </div>
            </dv-card>
            <dv-card
              header-height="40px"
              :card-bg="require('@/assets/15bj/党政机关整体智治bjx4.png')"
            >
              <template #header>
                <dv-title2>数字社会</dv-title2>
              </template>
              <div>
                <!--            todo -->
                <Image
                  :src="require('@/assets/components/152/a12.png')"
                  width="410"
                ></Image>
                <div class="flex">
                  <Pie
                    eleId="pie14"
                    :width="210"
                    :height="110"
                    :source="pie3"
                    :radius="['40%', '70%']"
                    roseType=""
                  ></Pie>
                  <bar-stack
                    eleId="bar14"
                    :width="210"
                    :height="110"
                    :source="bar4"
                    barWidth="15"
                    :stack="false"
                    :barBorderRadius="[15, 15, 15, 15]"
                    :color="[bar4Color]"
                  ></bar-stack>
                </div>
              </div>
            </dv-card>
            <!--        重点应用建设 Start -->
            <!--            <border-box :class="$style.zdyhjs">-->
            <!--              <dv-card :card-bg="require('@/assets/15bj/重点应用建设bj.png')">-->
            <!--                <template #header>-->
            <!--                  <dv-title1>重点应用建设</dv-title1>-->
            <!--                </template>-->
            <!--                &lt;!&ndash;          Todo &ndash;&gt;-->
            <!--                <div>-->
            <!--                  <Image-->
            <!--                    :src="require('@/assets/components/152/a16.png')"-->
            <!--                    width="410"-->
            <!--                  ></Image>-->
            <!--                </div>-->
            <!--              </dv-card>-->
            <!--            </border-box>-->

            <!--        两大体系 Start-->
            <border-box :class="$style.ldtx">
              <dv-card
                :header-bg="require('@/assets/15bj/两大体系bj.png')"
                :style="{ gap: '10px' }"
              >
                <template #header>
                  <dv-title1>两大体系</dv-title1>
                </template>
                <div :class="$style.ldtxContent">
                  <dv-card
                    :cardBg="require('@/assets/15bj/理论体系建设bj.png')"
                  >
                    <template #header>
                      <dv-title2>理论体系建设</dv-title2>
                    </template>
                    <!--          Todo -->
                    <div>
                      <Image
                        :src="require('@/assets/components/152/a13.png')"
                        width="410"
                      ></Image>
                    </div>
                  </dv-card>

                  <dv-card
                    :cardBg="require('@/assets/15bj/理论体系建设bj.png')"
                  >
                    <template #header>
                      <dv-title2>制度建设体系</dv-title2>
                    </template>
                    <!--          Todo -->
                    <div>
                      <Image
                        :src="require('@/assets/components/152/a15.png')"
                        width="410"
                      ></Image>
                    </div>
                  </dv-card>
                </div>
              </dv-card>
            </border-box>
          </div>
        </dv-card>
      </border-box>
    </div>
  </dv-card>
</template>

<script>
import BorderBox from "@/components/BorderBox1/index.vue";
import DvCard from "@/components/DvCard/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import DvTitle2 from "@/components/DvTitle2";
import Today from "./components/Today.vue";
import Image from "@/components/Image";
import BarStack from "@/components/charts/BarStack.vue";
import Pie from "@/components/charts/Pie.vue";
export default {
  name: "Right",
  components: {
    DvTitle2,
    DvTitle1,
    DvCard,
    BorderBox,
    Today,
    Image,
    BarStack,
    Pie,
  },
  data() {
    return {
      pie3: [
        { value: 24, name: "未完成" },
        { value: 32, name: "已完成" },
      ],
      bar4: {
        name: ["20以下", "21-30", "31-40"],
        series: [
          {
            data: [32, 58, 64],
          },
        ],
      },
      bar4Color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#F5FFFF ", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#00CCFF ", // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
    };
  },
};
</script>

<style lang="scss" module>
.rightContent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 240px 240px auto;
  grid-gap: 12px;
  height: 100%;
}
.zdyhjs {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 3;
}
.ldtx {
  grid-column-start: 1;
  grid-column-end: 3;
  .ldtxContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    height: 100%;
  }
}
.contentBox {
  height: 100%;
  box-sizing: border-box;
}
</style>
